﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>达内－NetCTOSS</title>
<div th:replace="template/module::css"></div>
</head>
<body>
	<!--Logo区域开始-->
	<div id="header">
		<div th:replace="template/module::logo"></div>
	</div>
	<!--Logo区域结束-->
	<!--导航区域开始-->
	<div id="navi">
		<div th:replace="template/module::nav"></div>
	</div>
	<!--导航区域结束-->
	<!--主要区域开始-->
	<div id="main">
		<form action="" method="">
			<!--查询-->
			<div class="search_add">
				<div>
					身份证：<input type="text" value="230101111111111111"
						class="text_search" />
				</div>
				<div>
					账务账号：<input type="text" value="admin1" class="width100 text_search" />
				</div>
				<div>
					姓名：<input type="text" value="张三" class="width70 text_search" />
				</div>
				<div>
					<select class="select_search" id="selYears">
					</select> 年 <select class="select_search" id="selMonths">
					</select> 月
				</div>
				<div>
					<input type="button" value="搜索" class="btn_search" />
				</div>
			</div>
			<!--数据区域：用表格展示数据-->
			<div id="data">
				<table id="datalist">
					<tr>
						<th class="width50">账单ID</th>
						<th class="width70">姓名</th>
						<th class="width150">身份证</th>
						<th class="width150">账务账号</th>
						<th>费用</th>
						<th class="width100">月份</th>
						<th class="width100">支付方式</th>
						<th class="width100">支付状态</th>
						<th class="width50"></th>
					</tr>
					<tr>
						<td>1</td>
						<td>张三</td>
						<td>230102197902137862</td>
						<td>admin1</td>
						<td>543.45</td>
						<td>2012年8月</td>
						<td></td>
						<td>未支付</td>
						<td><a href="bill_item.html" title="账单明细">明细</a></td>
					</tr>
					<tr>
						<td>2</td>
						<td>李四</td>
						<td>230102197901111111</td>
						<td>admin2</td>
						<td>843.00</td>
						<td>2012年9月</td>
						<td>现金</td>
						<td>已支付</td>
						<td><a href="bill_item.html" title="账单明细">明细</a></td>
					</tr>
					<tr>
						<td>3</td>
						<td>王五</td>
						<td>230111111111111111</td>
						<td>admin3</td>
						<td>12.00</td>
						<td>2012年10月</td>
						<td></td>
						<td>未支付</td>
						<td><a href="bill_item.html" title="账单明细">明细</a></td>
					</tr>
					<tr>
						<td>4</td>
						<td>张三</td>
						<td>230102197902137862</td>
						<td>admin1</td>
						<td>543.45</td>
						<td>2012年8月</td>
						<td></td>
						<td>未支付</td>
						<td><a href="bill_item.html" title="账单明细">明细</a></td>
					</tr>
					<tr>
						<td>5</td>
						<td>李四</td>
						<td>230102197901111111</td>
						<td>admin2</td>
						<td>843.00</td>
						<td>2012年9月</td>
						<td>现金</td>
						<td>已支付</td>
						<td><a href="bill_item.html" title="账单明细">明细</a></td>
					</tr>
					<tr>
						<td>6</td>
						<td>王五</td>
						<td>230111111111111111</td>
						<td>admin3</td>
						<td>12.00</td>
						<td>2012年10月</td>
						<td></td>
						<td>未支付</td>
						<td><a href="bill_item.html" title="账单明细">明细</a></td>
					</tr>
				</table>

				<p>
					业务说明：<br /> 1、设计支付方式和支付状态，为用户自服务中的支付功能预留；<br /> 2、只查询近 3
					年的账单，即当前年和前两年，如2013/2012/2011；<br /> 3、年和月的数据由 js 代码自动生成；<br />
					4、由数据库中的ｊｏｂ每月的月底定时计算账单数据。
				</p>
			</div>
			<!--分页-->
			<div id="pages">
				<div th:replace="template/module::page"></div>
			</div>
		</form>
	</div>
	<!--主要区域结束-->
	<div id="footer">
		<div th:replace="template/module::end"></div>
	</div>
	<script type="text/javascript">
	+function () {
                //写入最近3年
                var yearObj = document.getElementById("selYears");
                var year = (new Date()).getFullYear();
                for (var i = 0; i <= 2; i++) {
                    var opObj = new Option(year - i, year - i);
                    yearObj.options[i] = opObj;
                }
                //写入 12 月
                var monthObj = document.getElementById("selMonths");
                var opObj = new Option("全部", "全部");
                monthObj.options[0] = opObj;
                for (var i = 1; i <= 12; i++) {
                    var opObj = new Option(i, i);
                    monthObj.options[i] = opObj;
                }
               }();  
	</script>
</body>
</html>
